<template><div><h2 id="表格异步渲染" tabindex="-1"><a class="header-anchor" href="#表格异步渲染"><span>表格异步渲染</span></a></h2>
<p>当页面的表格展示的数据特别多（列多行多），并且加载的组件也较多时，可能会出现卡顿的现象，此时可以使用表格异步渲染功能，可以有效地减轻页面卡顿的情况：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 启用表格异步渲染功能</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">async</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">async</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 判断是否是异步渲染请求</span></span>
<span class="line"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">isAsyncRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>需要注意的是，如果页面没有出现明显的卡顿现象，则无需启用此功能；并且如果页面中存在多个数据表格，那么也无法使用此功能。</p>
</blockquote>
<p>开启此功能之后，表格<strong>工具栏</strong>(<code v-pre>toolbar</code>)以下的位置都会采用异步的方式进行渲染，换句话说，<strong>工具栏</strong>(<code v-pre>toolbar</code>)以及以上的位置只会刷新一次！在实际编码过程中需要注意有无特殊影响。</p>
<p>本文章首发在 <a href="https://learnku.com/" target="_blank" rel="noopener noreferrer">LearnKu.com</a> 网站上。</p>
</div></template>


